<template>
    <!-- 外部容器 -->
    <el-container>
        <!-- 顶部容器 -->
        <el-header>
            <el-row>
                <el-col :span="3" class="logo">权限管理系统</el-col>
                <el-col :span="3">
                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <!-- 侧边容器 -->
            <el-aside width="200px">
                <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <template v-for="(item,index) in $router.options.routes">
                        <el-submenu :index="index+''"  v-if="!item.leaf">
                            <template slot="title">
                                <i :class="item.iconCls"></i>
                                <span slot="title">{{item.name}}</span>
                            </template>
                            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">{{child.name}}</el-menu-item>
                        </el-submenu>
                        <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
                    </template>
                </el-menu>
            </el-aside>
            <!-- 内部容器 -->
            <el-container>
                <!-- 主要区域容器 -->
                <el-main>
                    <el-col :span="24">
                        <el-breadcrumb separator="/">
                              <el-breadcrumb-item class="breadcrumb" v-for="item in $route.matched" :key="item,path">
                                  {{item.name}}
                              </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <router-view></router-view>
                </el-main>
                <!-- 底部容器 -->
                <el-footer>
                    <div>底部</div>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
 export default {
    data() {
      return {
        isCollapse: false,
        routes:[]
      };
    },
    mounted(){
        console.log(this);
    },
    beforeCreate(){
        console.log(this);
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-container{
    height: 100%;
}
 .el-header {
    background-color: #409EFF;
    color: #333;
    padding:0;
  }
  .el-footer{
    background-color: #409EFF;
    color: #333;
    text-align: center;
  } 
  
  .el-aside {
    background-color: #FFF;
    color: #333;
    height: 100%;
  }
  
  .el-main {
    background-color: #FFF;
    color: #333;
  }
  
.logo{
    width:200px;
    line-height: 60px;
    font-size: 25px;
    color: #FFF;
    padding: 0 20px;
    border-right: 1px solid #FFF;
}
.breadcrumb{
    line-height: 50px
  }
</style>
